<template>
	<view class="order">
		<view class="list">
			<view :class="top==1? 'active':''" @click="checkout(1)">全部</view>
			<view :class="top==2? 'active':''" @click="checkout(2)">待发货</view>
			<view :class="top==3? 'active':''" @click="checkout(3)">待收货</view>
			<view :class="top==4? 'active':''" @click="checkout(4)">已收货</view>
		</view>
		<view class="list_order">
			<view v-if="top==1" class="order_one"  v-for="(item,order) in list_order" :key="order" >
				<view class="order_dingdan">
					{{item.title}}
				</view><!-- order_dingdan -->
				<view class="order_two">
					<image :src="item.image" class="orderiamge"></image>
					<span class="order_spana">
						{{item.one}}
					</span>
					<span class="order_spanb">
						{{item.two}}
					</span>
				</view><!-- order_two -->
				<view class="order_three">
					<span>{{item.three}}</span>
					{{item.four}}
				</view><!-- order_three -->
			</view><!-- 全部order_one -->
			<view class="more">
				——— 没有更多了 ————
			</view><!-- more -->
			
			
			
			<view v-if="top==2">内容2</view>
			<view v-if="top==3">内容3</view>
			<view v-if="top==4">内容4</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				top: 1,
				list_order:[
					{title:"订单编号：PT22981631066980",image: "../../static/images/xcvbm.jpg",one:"DW简约轻奢可爱迷人的小皮带女表",two:"￥899",three:"实付款:",four:" ￥899"},
					{title:"订单编号：PT22981631066980",image: "../../static/images/xcvbm.jpg",one:"DW简约轻奢可爱迷人的小皮带女表",two:"￥899",three:"实付款:",four:" ￥899"}
				]
			}	
		},
		onLoad() {
	
		},
		methods: {
	     checkout(index) {
	     	this.top = index
	     },
		}
	}
	
	
</script>

<style lang="scss">
	.order{
		background-color: #F4F4F4;
		height:100vh;
		.list{display: flex;justify-content:space-around;
		background-color: #fff;padding:10rpx 2%;
		 view{width:22%;text-align: center;padding-bottom:30rpx;}
		  }
		  .active:hover{border-bottom: 2px solid #ED9F1C;}
		  .order_one{
			  margin-top:20rpx;
			  background-color: #FFFFFF;
			  overflow: hidden;
			  .order_dingdan{border-bottom:1rpx solid #C0C0C0;line-height: 80rpx;font-size:30rpx;text-indent:30rpx ;} 
			  .order_two{overflow: hidden; border-bottom:1rpx solid #C0C0C0;
				  .orderiamge{width:25%;float: left;height: 200rpx;margin:20rpx 30rpx  auto;padding-bottom:30rpx;}
				  .order_spana{width:60%; margin-top:20rpx;margin-bottom:60rpx ;float: left;	 }
				  .order_spanb{font-weight: 700;}
			  }
			  .order_three{text-align: right;margin-right: 30rpx;line-height: 80rpx;
				  span{color: #999999;}
			  }
		  }
		  .more{
			  text-align: center;
			  color: #C8C7CC;
			  background-color: #F3F4F8;
			  line-height: 90rpx;
		  }
	}
</style>
